<template>
  <div class="user" :style="note">
    <el-container>
      <!--      头部-->
      <el-header style="background-color: #404d4e;">
        <div>
          <!--          logo部分-->
          <div style="float: left;margin-left: 20px" class="head_title">
            <img :src="icon"
                 style="height: 45px;line-height: 60px;vertical-align:middle;margin-right: 20px">
            <h1 style="line-height: 60px;display: inline-block;vertical-align:middle">和邦物业</h1>
          </div>
          <div style="float: right;margin-right: 30px" class="head_title">
            <el-dropdown>
                            <span style="line-height: 60px;color: white;font-size: 20px">
                                admin
                                <i class="el-icon-s-custom" style="margin: 0 30px 0 0 ">
                                </i>
                            </span>

              <el-dropdown-menu slot="dropdown">
                <el-button @click="dialogFormVisible1 = true" style="width: 150px;border: 0px">我要报修
                </el-button>
                <br>
                <el-button @click="dialogFormVisible = true"
                           style="width: 150px;border: 0px;margin-left: 0">我要投诉
                </el-button>
                <br>
                <el-button @click="loadCompliant"
                           style="width: 150px;border: 0px;margin-left: 0">我的申报
                </el-button>
                <br>
                <el-button @click="logout" style="width: 150px;border: 0px;margin-left: 0">登出
                </el-button>
              </el-dropdown-menu>
            </el-dropdown>
            <!--                        我的申报-->
            <el-dialog :visible.sync="dialogTableVisible2" title="我的申报" width="800px">
              <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">我的投诉</el-menu-item>
                <el-menu-item index="2">我的报修</el-menu-item>
              </el-menu>
              <el-table :data="gridData" v-show="comVis">
                <!--                                投诉-->
                <el-table-column
                    prop="comType"
                    label="投诉类型"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="remarks"
                    label="投诉内容"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="comDate"
                    label="投诉时间"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="处理状态">
                  <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.status==1">已处理</el-tag>
                    <el-tag type="danger" v-else>待处理</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="clrName"
                    label="处理人"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-popconfirm
                        confirm-button-text='好的'
                        cancel-button-text='不用了'
                        icon="el-icon-info"
                        icon-color="red"
                        title="您确定删除此条投诉吗？"
                        @confirm="handleDelete(scope.$index, scope.row)"
                    >
                      <el-button slot="reference" size="mini" type="danger" style="margin-left:8px">
                        删除
                      </el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
              <!--                            报修-->
              <el-table :data="gridData1" v-show="repVis">
                <el-table-column
                    prop="repType"
                    label="报修类型"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="remarks"
                    label="报修内容"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="repDate"
                    label="报修时间"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="处理状态">
                  <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.status==1">已处理</el-tag>
                    <el-tag type="danger" v-else>待处理</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="clrName"
                    label="处理人"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-popconfirm
                        confirm-button-text='好的'
                        cancel-button-text='不用了'
                        icon="el-icon-info"
                        icon-color="red"
                        title="您确定删除此条报修吗？"
                        @confirm="handleDelete1(scope.$index, scope.row)"
                    >
                      <el-button slot="reference" size="mini" type="danger" style="margin-left:8px">
                        删除
                      </el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </el-dialog>

            <el-dialog title="我要投诉" :visible.sync="dialogFormVisible">
              <!--                            投诉类型,详细描述,投诉凭证-->
              <el-form :model="form">
                <el-form-item label="投诉描述" :label-width="formLabelWidth">
                  <el-input v-model="form.remakes"
                            autocomplete="off"
                            type="textarea"
                            :rows="2"
                            placeholder="请输入投诉内容内容"></el-input>
                </el-form-item>
                <el-form-item label="投诉类型" :label-width="formLabelWidth">
                  <el-select v-model="form.comId" placeholder="投诉类型">
                    <el-option v-for="compliantType in compliantTypes" :label="compliantType.type"
                               :value="compliantType.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="上传凭证" :label-width="formLabelWidth">
                  <el-upload
                      action="http://localhost:8080/upload/img/complaintImg"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :on-success="handleSuccess">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sendCompliant">投 诉</el-button>
              </div>
            </el-dialog>

            <el-dialog title="我要报修" :visible.sync="dialogFormVisible1">
              <!--                            报修类型,详细描述,报修凭证-->
              <el-form :model="form1">
                <el-form-item label="报修描述" :label-width="formLabelWidth">
                  <el-input v-model="form1.remakes"
                            autocomplete="off"
                            type="textarea"
                            :rows="2"
                            placeholder="请输入报修内容内容">
                  </el-input>
                </el-form-item>
                <el-form-item label="报修类型" :label-width="formLabelWidth">
                  <el-select v-model="form1.repairId" placeholder="报修类型">
                    <el-option v-for="repairType in repairTypes" :label="repairType.type"
                               :value="repairType.id"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="上传凭证" :label-width="formLabelWidth">
                  <el-upload
                      action="http://localhost:8080/upload/img/repair"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreview1"
                      :on-remove="handleRemove1"
                      :on-success="handleSuccess1">
                    <i class="el-icon-plus"></i>
                  </el-upload>

                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>

                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="sendRepair">报 修</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
        <div class="">
          <!--          登录及用户下拉框，右浮动-->
        </div>
      </el-header>
      <!--      体部-->
      <el-main>

        <div style="margin: 0 auto">
          <!--          轮播图通栏-->
          <template>
            <div class="block">
              <el-carousel trigger="click" height="500px" style="width: 1300px;margin: 0 auto">
                <el-carousel-item v-for="b in bannerArr">
                  <img :src="b.url" style="width: 100%;height: 100%" alt="">
                </el-carousel-item>
              </el-carousel>
            </div>
          </template>
        </div>

        <div style="width: 100% ;">
          <!--          企业简介和企业新闻通栏-->
          <ul class="card_ul">
            <li class="ul_li">
              <el-card class="card">
                <h1>关于和邦</h1>
                <el-divider></el-divider>
                <el-row>
                  <el-col :span="12">
                    <img :src="bussinimg" alt="" style="height: 340px;width: 270px">
                  </el-col>
                  <el-col :span="12">
                    <div style="height: 340px;margin-top: 40px">
                      <span style="font-size: 20px;">五星级服务标准，专业化物业管理，一站式物业管理服务， 全方位解决您的后顾之忧。和邦物业是世界金钥匙组织联盟成员公司，于2004年在贵州贵阳注册成立，注册资本5000 万元人民币，于2011年正式更名为“贵州和邦物业管理有限公司”，以提供商业写字楼、商业、住宅等类</span>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </li>
            <li class="ul_li">
              <el-card class="card" style="font-size: 20px;">
                <h1>公司新闻</h1>
                <el-divider></el-divider>
                <ul v-for="n in news" style="position: relative">
                  <li style="margin-left: 20px;margin-bottom: 20px">{{ n.title }}<span
                      style="position: absolute;right: 0">{{ n.time }}</span></li>
                </ul>
              </el-card>
            </li>
          </ul>
        </div>
        <!--        分割线-->
        <div style="width: 100% ;">
          <!--          公司愿景通栏-->

          <ul class="card_ul">
            <li class="ul_li" v-for="item in thridIteam">
              <!--              业务概览-->
              <el-card class="card_small">
                <img :src="item.url" alt=""
                     style="width: 340px;height: 200px;margin: 0 auto;display: block">
                <h1 style="margin-top: 20px;font-size: 30px">{{ item.title }}</h1>
                <p style="margin-top: 20px;font-size: 20px">{{ item.artical }}</p>
              </el-card>
            </li>
          </ul>
        </div>
      </el-main>
      <!--      脚部-->
      <el-footer>
        <div>
          logo
          <!--          logo-->
        </div>
        <!--        法律信息-->
        <div>
          法律信息
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<style>
* {
  margin: 0;
  padding: 0;
}

.user {
  background-size: cover;
  overflow: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0
}

.layout_harder {
  background-color: #1c2c3e;
  font-size: 30px;
  font-weight: bold;
}

.head_title {
  color: white;
}

.card_ul {
  width: 1300px;
  margin: 30px auto;
  display: flex;
  justify-content: space-between;
}

.ul_li {
  float: left;
  list-style-type: none;

}

.card {
  width: 620px;
  height: 500px;
}

.card_small {
  width: 400px;
  height: 500px;
}

.ul_li1 {
  float: left;
  list-style-type: none;
}

/*走马灯效果*/
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

textarea {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  font-size: inherit;
}
</style>
<script>
import axios from "axios";

export default {
  data: function () {
    return {
      activeIndex: '1',
      gridData: [{}],
      gridData1: [{}],
      repairTypes: [{
        id: 0,
        type: "网络维修",
      }],
      compliantTypes: [
        {
          id: 0,
          type: "小区环境问题",
        }
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogTableVisible2: false,
      dialogImageUrl: '',
      dialogVisible: false,
      repVis: false,
      comVis: true,
      form: {
        remakes: "",
        comId: "",
        imgUrls: ["", ""]
      },
      form1: {
        remakes: "",
        repairId: "",
        imgUrls: ["", ""]
      },
      formLabelWidth: '120px',
      icon: require("../assets/图标.png"),
      thridIteam: [
        {
          url: require('../../public/degist.jpg'),
          title: "业务概览",
          artical: "澳西集团业务范围涵盖房地产开发、土地买卖、投资顾问、营销代理、一二手住宅、商业地产、物业租售等项目全案策划及销售代理，服务产品类型涵盖住宅、公寓、别墅......"
        },
        {
          url: require('../../public/mind.jpg'),
          title: "物业理念",
          artical: "公司遵循“以人为本”的服务理念，现已形成独具特色的公司管理模式。公司从客户和市场的需求出发,不断改进和完善管理体系及服务产品，寓管理于服务之中，全心全意为客户提供优质服务"
        },
        {
          url: require('../../public/nanhuli.jpg'),
          title: "南湖里项目",
          artical: "国锐·金嵿位于荣华南路与荣京西街交汇处，亦庄国际新城CBD商务区核心，项目集合顶级办公、全精装高端华宅、空中花园别墅以及内地首个美国LEED认证 铂金会所等多业态于一体......"
        },
      ],
      news: [
        {title: "和邦物业主题沙龙活动圆满落幕", time: "2022-03-17"},
        {title: "试点推广公共收益监管！禾邦物业行业今年要办", time: "2022-03-17"},
        {title: "禾邦物业管理办法(禾邦物业管理条例2010)", time: "2022-03-17"},
        {title: "贵州3.2万个城市住宅小区物业全覆盖", time: "2022-03-17"},
        {title: "修订后的《贵阳市住宅物业管理条例》获批", time: "2022-03-17"},
        {title: "携手同行 共筑和谐美好,禾邦物业行业", time: "2022-03-17"},
        {title: "贵阳市物业行业:践行初心使命 勇当抗疫先锋", time: "2022-03-17"},
        {title: "禾邦朱保全：物业规模增速控制在30%以内", time: "2022-03-17"},
      ],
      bussinimg: require("../../public/bussinimg.jpg"),
      note: {
        backgroundImage: "url(" + require("../../public/webp.png") + ")",
      },
      bannerArr: [
        {url: require('../../public/banner/b1.jpg')},
        {url: require('../../public/banner/b2.jpg')},
        {url: require('../../public/banner/b3.jpg')},
      ]
    }
  },
  created: function () {
    this.loadCompliantType();
    this.loadRepairType();
    this.loadRepair();
  },
  methods: {
    loadRepair() {
      let token = localStorage.getItem("accessToken");
      axios.get("http://localhost:8080/repair/loadRepair/personal", {headers: {"Authentication": "Bearer " + token}}).then((response) => {
        let jsonResult = response.data;
        this.gridData1 = jsonResult.data;
      })
    },
    handleDelete1(index, repair) {
      let ids = []
      ids[0] = repair.id
      axios.post("http://localhost:8080/repair/deleteRepair/", ids).then((response) => {
        this.jsonResult = response.data;
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.loadRepair()
      })
    },
    handleDelete(index, compliant) {
      axios.get("http://localhost:8080/complaint/deleteCompliant/" + compliant.id).then((response) => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.loadCompliant();
      })
    },
    loadCompliant() {
      this.dialogFormVisible = true
      let token = localStorage.getItem("accessToken");
      axios.get("http://localhost:8080/complaint/loadCompliant/personal", {headers: {"Authentication": "Bearer " + token}}).then((response) => {
        this.gridData = response.data;
      })
    },
    handleSelect(key) {
      if (key == 1) {
        this.comVis = true
        this.repVis = false
      }
      if (key == 2) {
        this.comVis = false
        this.repVis = true
      }
    },
    sendCompliant() {
      let token = localStorage.getItem("accessToken");  // 没有token
      console.log("从localStorage获取到的token为" + token)
      axios.post("http://localhost:8080/complaint/addCompliant", this.form, {headers: {"Authentication": "Bearer " + token}}).then((res) => {

      })
      this.dialogFormVisible = false
    },
    sendRepair() {
      let token = localStorage.getItem("accessToken");  // 没有token
      console.log("从localStorage获取到的token为" + token)
      console.log("向后端发出新增报修请求")
      axios.post("http://localhost:8080/repair/addRepair", this.form1, {headers: {"Authentication": "Bearer " + token}}).then((res) => {
      })
      this.dialogFormVisible1 = false
    },
    logout() {
      console.log("退出登录")
      axios.post("http://localhost:8080/logout")
      location.href = "/"
    },
    loadRepairType() {
      axios.get("http://localhost:8080/repair/loadRepairType").then((response) => {
        let jsonResult = response.data;
        this.repairTypes = jsonResult.data;
        // console.log(this.repairTypes)
      })
    },
    handleSuccess1(response, file, fileList) {
      //遍历fileList数组取出数组file对象的图片路径装进一个新的数组里面
      let arr = [];
      for (let file of fileList) {
        //push往数组中添加元素 file.response图片路径
        arr.push(file.response);
      }
      //把数组中多个图片路径 合并成一个字符串赋值给urls
      this.form1.imgUrls = arr.toString();
    },
    handleRemove1(file, fileList) {
      console.log(file, fileList);
      axios.get("http://localhost:8080/upload/img/repair/remove?name=" + file.response).then((response) => {
        console.log("删除完成!");
      })
      //遍历fileList数组取出数组file对象的图片路径装进一个新的数组里面
      let arr = [];
      for (let file of fileList) {
        //push往数组中添加元素 file.response图片路径
        arr.push(file.response);
      }
      //把数组中多个图片路径 合并成一个字符串赋值给urls
      this.form1.imgUrls = arr.toString();
    },
    handlePictureCardPreview1(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response, file, fileList) {
      //遍历fileList数组取出数组file对象的图片路径装进一个新的数组里面
      let arr = [];
      for (let file of fileList) {
        //push往数组中添加元素 file.response图片路径
        arr.push(file.response);
      }
      //把数组中多个图片路径 合并成一个字符串赋值给urls
      this.form.imgUrls = arr.toString();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      axios.get("http://localhost:8080/upload/img/complaintImg/remove?name=" + file.response).then((response) => {
        console.log("删除完成!");
      })
      //遍历fileList数组取出数组file对象的图片路径装进一个新的数组里面
      let arr = [];
      for (let file of fileList) {
        //push往数组中添加元素 file.response图片路径
        arr.push(file.response);
      }
      //把数组中多个图片路径 合并成一个字符串赋值给urls
      this.form.imgUrls = arr.toString();
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    loadCompliantType() {
      axios.get("http://localhost:8080/complaint/loadCompliantType").then((response) => {
        console.log("投诉类型列表为:", response.data)
        this.compliantTypes = response.data;
      })
    },
  }
}
</script>